
import React, { useEffect, useState } from 'react';
import { system_realtimedata } from "../../../utils/api"
import *as echarts from "echarts"
import "../../../styles/Realtime_index.scss"
interface Props {

}
function Realtime_Data(props: Props) {

    var [xaxis, setXaxis] = useState();
    var [series, setSeries] = useState();
    var [chuli, setChuli] = useState();
    useEffect(() => {
        system_realtimedata().then((res) => {
            setXaxis(res.data.list.xAxis);
               (res.data.list.series[0].data)
            setChuli(res.data.list.series[1].data)
        })
    }, [])

    useEffect(() => {
        type EChartsOption = echarts.EChartsOption;

        var chartDom = document.getElementById('main')!;
        var myChart = echarts.init(chartDom);
        var option: EChartsOption;

        option = {
            legend: { //设置图例
                top: 30
            },
            title: {
                text: '在线服务数据趋势',
                left: 'center'
            },

            toolbox: {
                feature: {
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                data: xaxis,
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: '接待量',
                    type: 'line',
                    data: series,
                    symbol: 'circle',
                    symbolSize: 5,
                    label: {
                        show: true,
                        position: 'top'
                    },

                },
                {
                    name: '处理量',
                    type: 'line',
                    data: chuli,
                    symbol: 'circle',
                    symbolSize: 5,
                    label: {
                        show: true,
                        position: 'top'
                    },
                }
            ]
        };
        option && myChart.setOption(option)

    })

    return (
        <div className='realtime_data'>

            <h3>实时数据</h3>
            <div className='box'>
                <div className='box1'>
                    <div className='top'>
                        <span>正在咨询人数</span>
                        <span style={{ fontSize: "20px", color: "#1890ff" }}>1w+</span>
                    </div>
                    <div className='buttom'>
                        <span>当前在线客服数 1w+</span>
                    </div>
                </div>
                <div className='box1'>
                    <div className='top'>
                        <span>正在排队人数</span>
                        <span style={{ fontSize: "20px", color: "#1890ff" }}>2w</span>
                    </div>
                    <div className='buttom'>
                        <span>今日排队总数 2w</span>
                    </div>
                </div>
                <div className='box1'>
                    <div className='top'>
                        <span>今日会话量</span>
                        <span style={{ fontSize: "20px", color: "#1890ff" }}>100</span>
                    </div>
                    <div className='buttom'>
                        <span>今日平均响应时长 5000s</span>
                    </div>
                </div>
                <div className='box1'>
                    <div className='top'>
                        <span >今日排队失败量</span>
                        <span style={{ fontSize: "20px", color: "#1890ff" }}>5w</span>
                    </div>
                    <div className='buttom'>
                        <span>实际接收率 80%</span>
                    </div>
                </div>
                <div className='box1'>
                    <div className='top'>
                        <span>今日相对满意率</span>
                        <span style={{ fontSize: "20px", color: "#1890ff" }}>98%</span>
                    </div>
                    <div className='buttom'>
                        <span>今日参评率 99%</span>
                    </div>
                </div>
            </div>
            <h3 style={{ marginTop: "50px" }}>今日在线服务数据趋势</h3>
            <div className='aaamain' >
                <div id='main'>
                </div>
            </div>

        </div>
    );
}

export default Realtime_Data;